<template>
  <view class="form-view">
    <view class="group">
      <view class="page-container">
        <view class="title container"> 组合选择 </view>
      </view>
      <scroll-view
        class="group-scroll"
        scroll-x
        scroll-with-animation
        :scroll-into-view="`group-item${groupIndex + 1}`"
      >
        <view class="page-container">
          <view
            v-for="(item, index) in pageInfo.serviceCompositionList"
            :key="index"
            :id="`group-item${index + 1}`"
            class="item-container"
          >
            <view
              class="group-item"
              :class="{ active: index == groupIndex }"
              @click="changeGroup(index)"
            >
              <view class="name"> {{ item.name }} </view>
              <view class="price flex flex-middle">
                {{ `￥${item.price}` }}
                <text>{{ `/${item.serviceTime}分钟` }}</text>
              </view>
            </view>
          </view>
          <view class="default"></view>
        </view>
      </scroll-view>
    </view>

    <view class="time container" @click="changeShowTime(true)">
      <view class="page-container">
        <view class="title flex flex-middle flex-between">
          服务时间
          <view class="time-view flex flex-middle">
            今天 18:30
            <u-icon name="arrow-right" size="14" color="#333" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    groupIndex: {
      type: Number,
      default: 0,
    },
    changeGroup: {
      type: Function,
      default: () => {},
    },
    pageInfo: {
      type: Object,
      default: {},
    },
    changeShowTime: {
      type: Function,
      default: () => {},
    },
  },
};
</script>

<style scoped lang="scss">
.form-view {
  border-bottom: 10px solid #f6f6f6;

  .container {
    padding: 0 16px;
  }

  .time {
    margin-top: 16px;

    &-view {
      color: #ed6041;
    }
  }

  .group-scroll {
    white-space: nowrap;

    .default {
      width: 16px;
      display: inline-block;
    }

    .active {
      border-color: #31bc4e !important;
      background: #f3fff0;
    }

    .item-container {
      padding-left: 16px;
      display: inline-block;
    }

    .group-item {
      height: 54px;
      border-radius: 9px;
      border: 1px solid #cbcbcb;
      padding: 0 10px;

      .price {
        font-size: 16px;
        color: #ed6041;

        text {
          color: #4c4c4c;
          font-size: 12px;
          margin-left: 2px;
        }
      }

      .name {
        padding-top: 8px;
        font-size: 12px;
        color: #333;
        padding-left: 2px;
      }
    }
  }

  .title {
    color: #383838;
    height: 40px;
    line-height: 40px;
  }
}
</style>